<template>
  <el-drawer size="800" v-model="显示" :show-close="false" :before-close="关闭前处理">
    <template #header>
      <!-- formData:{{ formData }} -->
      <div class="flex justify-between items-center">
        <span class="text-lg">{{ !id ? '新增ing' : '编辑ing' }}</span>
        <div>
          <el-button type="primary" @click="提交">提交</el-button>
          <el-button @click="关闭前处理">取 消</el-button>
        </div>
      </div>
    </template>
    <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
      <div class="flex">
        <el-form-item label="名称:" prop="名称" class="flex-1">
          <el-input v-model="formData.名称" :clearable="true" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="类别:" prop="类别" class="flex-1">
          <el-select v-model="formData.类别" placeholder="请选择类别" style="width:100%" :clearable="true">
            <el-option v-for="(item, key) in dataSource.类别" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格:" prop="价格" class="flex-1">
          <el-input v-model.number="formData.价格" :clearable="true" placeholder="请输入价格" />
        </el-form-item>
      </div>
      <el-form-item label="图片:" prop="图片">
        <SelectImage multiple v-model="formData.图片" file-type="image" />
      </el-form-item>
      <el-form-item label="关键词:" prop="关键词">
        <ArrayCtrl v-model="formData.关键词" editable />
      </el-form-item>
      <el-form-item label="可选属性:" prop="可选属性">
        <a数组 v-model="formData.可选属性" name="可选属性" />
        <!-- <el-checkbox-group v-model="formData.可选属性">
            <el-checkbox :label="item.label" :value="item.value" v-for="(item, key) in 可选属性Options" />
          </el-checkbox-group> -->
      </el-form-item>
      <el-form-item label="skus:">
        <a表 :可选属性="formData.可选属性" ref="sku子表"></a表>
        <!-- <el-checkbox-group v-model="formData.可选属性">
            <el-checkbox :label="item.label" :value="item.value" v-for="(item, key) in 可选属性Options" />
          </el-checkbox-group> -->
      </el-form-item>
      <el-form-item label="详细说明:" prop="详细说明">
        <RichEdit v-model="formData.详细说明" />
      </el-form-item>

    </el-form>
  </el-drawer>
</template>

<script setup>
import *  as a from '@/amtf/amtf/utils'
import { useRouter } from 'vue-router'
const router = useRouter()
import a表 from './商品sku-表.vue';
import {
  getA商品DataSource,
  createA商品,
  updateA商品,
  findA商品,
  getA商品List
} from '@/plugin/mall/api/商品'
import { getUrl } from '@/utils/image'
// 图片选择组件
import SelectImage from '@/components/selectImage/selectImage.vue'
// 富文本组件
import RichEdit from '@/components/richtext/rich-edit.vue'
// 数组控制组件
import ArrayCtrl from '@/components/arrayCtrl/arrayCtrl.vue'
import a数组 from '@/components/arrayCtrl/a数组.vue'

// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict, filterDataSource, returnArrImg, onDownloadFile } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { watch } from 'vue';

const props = defineProps({
  显示抽屉: { type: Boolean, default: false },
  id: { default: '' },
})

const 显示 = ref(false)
watch(() => props.id, (newValue, oldValue) => {
  // console.log(`props.id 改变 ing👇`)
  if (!props.id) {
    formData.value = a.深拷贝(空模板)
  } else {
    取数据()
  }
})

// 自动化生成的字典（可能为空）以及字段
const 可选属性Options = ref([])

const 空模板 = {
  名称: '',
  类别: undefined,
  图片: [],
  关键词: [],
  价格: undefined,
  详细说明: '',
  SKUS: [],
  字典取值: '',
  可选属性: [],
}

const formData = ref(a.深拷贝(空模板))

const dataSource = ref([])
const getDataSourceFunc = async () => {
  const res = await getA商品DataSource()
  // console.log(`res 👉`,res)
  if (res.code === 0) {
    dataSource.value = res.data
  }
}
getDataSourceFunc()

// 验证规则
const rule = reactive({
})

const elFormRef = ref()

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
  可选属性Options.value = await getDictFunc('可选属性')
}

// 获取需要的字典 可能为空 按需保留
setOptions()

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 关闭弹窗
const 关闭前处理 = () => {
  显示.value = false
}

function 使显示() {
  显示.value = true
}

const sku子表 = ref()

const 提交 = async () => {
  // return
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return
    formData.value.SKUS = sku子表.value.arr
    formData.value.拟删除子表ids = Object.keys(sku子表.value.拟删除子表ids)
    let res
    if (!props.id) {
      res = await createA商品(formData.value)
    } else {
      res = await updateA商品(formData.value)
    }

    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '成功'
      })
      关闭前处理()
      // getTableData()
      emit('提交')
    }
  })
}

const emit = defineEmits(['提交'])

const 取数据 = async () => {
  // console.log(`props.id 👉`,props.id)
  const res = await findA商品({ ID: props.id })
  console.log(`findA商品res 👉`, res)
  if (res.code === 0) {
    formData.value = res.data
    sku子表.value.初始化(formData.value.SKUS)
  }
}


defineExpose({ 使显示 })
</script>

<style></style>
